// import React, { useState } from 'react'
// import '../../index.css'
// import { useStore } from '../../store'
// import TodoList from '../Todolist'

// export default function Todo() {
//   const { taskStore } = useStore()
//   console.log('taskStore-todo=',taskStore);
//   const [keyWord,setKeyWord]=useState('')

//   const onKeyUp=(e)=>{
//     console.log('keycode=',e);
//     if(e.keyCode==13){
//       taskStore.addItem({
//         id:taskStore.list[taskStore.list.length-1].id+1,
//         name:keyWord,
//         isDone:false
//       })
//     }
//     setKeyWord('')
//   }
//   const keyWordChange=(e)=>{
//     console.log('keywordChange',e);
//     setKeyWord(e.target.value)
//   }
//   return (
//     <section className='todoapp'>
//         <header className='header'>
//             <h1>todos</h1>
//             <input 
//               type="text" 
//               className="new-todo" 
//               placeholder='What needs to be done?'
//               autoFocus
//               autoComplete='off'
//               onKeyUp={onKeyUp}
//               onChange={keyWordChange}
//               value={keyWord}
//             />
//         </header>
//         <TodoList></TodoList>
//         <footer className='footer'>
//           <span className="todo-count">任务总数：{10} 已完成：1</span>
//         </footer>
//     </section>
//   )
// }


import React, { useState } from 'react';
import '../../index.css'
import TodoList from '../TodoList';
import { useStore } from '../../store';

const Todo = () => {
  const [keyword, setKeyword] = useState('');
  const { taskStore } = useStore()

  const onKeyUp = (e) => {
    if (e.keyCode === 13) {
      taskStore.addItem({
        id: taskStore.list[taskStore.list.length - 1].id + 1,
        name: keyword,
        isDone: false
      })
      setKeyword('')
    }

  }

  const keywordChange = (e) => {
    setKeyword(e.target.value)
  }

  return (
    <section className='todoapp'>
      <header className="header">
        <h1>todos</h1>
        <input 
          type="text" 
          className='new-todo' 
          placeholder='What needs to be done?'
          autoFocus
          autoComplete='off'
          value={keyword}
          onChange={keywordChange}
          onKeyUp={onKeyUp}
        />
      </header>

      <TodoList />

      <footer className='footer'>
        <span className="todo-count">
          任务总数: {taskStore.totalTask}  已完成: {taskStore.completedTask}
        </span>
      </footer>
    </section>
  );
}

export default Todo;